Vue.component('product_list_detail', {
	props: ['item',"is_show"],
	template: '<div class="product_list_detail">\
				<div class="module">\
					<li class="title">\
						{{title}}\
						<button type="button" style="width:auto;" class="btn btn-base back_list" @click="hide">返回列表</button>\
					</li>\
					<!--轮播图-->\
					<div class="lunbo" v-if="banners.length>0">\
						<div class="swiper-container product_list_detail_container">\
						    <div class="swiper-wrapper">\
						        <div class="swiper-slide" v-for="item in banners">\
									<div style="background-size: 100%;" @click="goBannerLinkUrl(item)" v-bind:style=\'{"background-image":"url("+host+item.ImgUrl+")"}\'></div>\
									<img v-bind:src="host+item.ImgUrl" class="transform_center" alt="" />\
								</div>\
						    </div>\
						    <!-- 如果需要分页器 -->\
						    <div class="swiper-pagination product_list_detail_pagination"></div>\
						    <!-- 如果需要导航按钮 -->\
						    <div class="swiper-button-prev product_list_detail_prev"></div>\
						    <div class="swiper-button-next product_list_detail_next"></div>\
						    <!-- 如果需要滚动条 -->\
						    <div class="swiper-scrollbar"></div>\
						</div>\
					</div>\
					<!--推荐产品-->\
					<div class="recommend module">\
						<ul class="list">\
							<li class="cursor" @click="go_introduce(item)" v-for="item in list_info">\
								<span>{{item.ProductName}}</span> <i class="glyphicon glyphicon-menu-right"></i>\
							</li>\
						</ul>\
						<div v-if="list_info.length==0" class="text-center" style="font-size: 25px;padding-top:20px;">产品即将上架，请耐心等待</div>\
					</div>\
				</div>\
				<div class="cover"></div>\
			</div>',
	data: function() {
		return {
			host:globalData.constParam.url.baseUrl+'/',
			url:{		
				getBannerList:'/api/Banner/GetBannerList', //获取banner
				getProductsByCategoryID:'/api/Product/GetProductsByCategoryID',  //获取产品类别详情页
			},
			title:"公务机",
			list_info:[], //产品列表
			banners:[],//轮播图
		}
	},
	watch: {
		id: function(val, oldval) {
			console.log(val, oldval)
		}
	},
	mounted: function() {
		this.getInfo()
		console.log(document.body.scrollTop)
		var top = 100 + document.body.scrollTop  + "px"
		$(".product_list_detail .module").css({
			"top":top
		})
	},
	methods: {		
		getInfo:function(){
			var that = this	
			//类别名称或国家名
			that.title = that.item.CategoryName || that.item.CountryName
			//获取banner
			var banner_data = {
				PageIndex:1,PageSize:1000,BannerType:'Product'
			}
			if(globalData.getStorage("modelID") ==4 || globalData.getStorage("modelID") ==9){
				globalData.ajaxPost(that.url.getBannerList, banner_data, function(res) {
					console.log(res)
					if(res.suc){
						//测试数据
						that.banners = res.data						
						setTimeout(function(){
							that.reset_lunbo()
						},100)
					}				
				})
			}
			var data = {
				ModelID:  globalData.getStorage("modelID"),
				ProductCategoryID:that.item.ID,
				DistrictID:this.is_show.DistrictID
			}
			globalData.ajaxPost(that.url.getProductsByCategoryID, data, function(res) {
				console.log(res)
				if(res.suc){
					that.list_info = res.data
				}				
			})
		},
		reset_lunbo: function() {
			var mySwiper = new Swiper('.product_list_detail_container', {
				loop: true,
				// 如果需要分页器
				pagination: '.product_list_detail_pagination',
				// 如果需要前进后退按钮
				nextButton: '.product_list_detail_next',
				prevButton: '.product_list_detail_prev',
				loop: true,
				autoplay:3000,
				autoplayDisableOnInteraction : false,
				// 如果需要滚动条
				//scrollbar: '.swiper-scrollbar',
			})
		},
		goBannerLinkUrl:function(item){
			if(item.Product){
				this.go_introduce(item.Product)
			}			
		},
		go_introduce:function(item){
			//判断是否登录，登录跳转到详情页，未登录弹出简介
			this.$emit("go_introduce",item)
		},
		hide: function() {
			this.is_show.value = false
		}
	}
})
